<template>
  <div class="top-count">
    <div class="count" v-for="item in countList" :key="item">
      <div class="count-title">
        <span>{{ item.title }}</span>
        <svg
          t="1696686169855"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2965"
          width="19"
          height="19"
        >
          <path
            d="M512 170.666667C324.266667 170.666667 170.666667 324.266667 170.666667 512s153.6 341.333333 341.333333 341.333333 341.333333-153.6 341.333333-341.333333S699.733333 170.666667 512 170.666667z m0 640c-164.266667 0-298.666667-134.4-298.666667-298.666667s134.4-298.666667 298.666667-298.666667 298.666667 134.4 298.666667 298.666667-134.4 298.666667-298.666667 298.666667z"
            fill="#ccc"
            p-id="2966"
          ></path>
          <path
            d="M512 448c-12.8 0-21.333333 8.533333-21.333333 21.333333v213.333334c0 10.666667 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333V469.333333c0-10.666667-8.533333-21.333333-21.333333-21.333333zM512 320c-12.8 0-21.333333 10.666667-21.333333 21.333333v42.666667c0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-10.666667 21.333333-21.333333v-42.666667c0-12.8-8.533333-21.333333-21.333333-21.333333z"
            fill="#ccc"
            p-id="2967"
          ></path>
        </svg>
      </div>
      <div class="conut-body" :id="`count1${item.id}`">{{ item.count }}</div>
      <div class="conut-more">
        {{ item.title }} -- <span :id="`count2${item.id}`">{{ item.count }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountUp } from 'countup.js'
import { onMounted } from 'vue'

const countList: any = [
  { id: 1, title: '商品总销量', count: 509989 },
  { id: 2, title: '商品总收藏', count: 87226 },
  { id: 3, title: '商品总库存', count: 853667 },
  { id: 4, title: '商品总销售', count: 73118523, sale: true }
]

onMounted(() => {
  countList.forEach((item: any) => {
    new CountUp(`count1${item.id}`, item.count, {
      prefix: item.sale ? '¥' : ''
    }).start()
  })
  countList.forEach((item: any) => {
    new CountUp(`count2${item.id}`, item.count, {
      prefix: item.sale ? '¥' : ''
    }).start()
  })
})
</script>

<style lang="scss" scoped>
.top-count {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  .count {
    width: 20%;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px #ccc;
    padding: 5px 10px;
    transition:
      box-shadow 0.5s,
      transform 0.5s;
    &:hover {
      transform: scale(1.01);
      box-shadow: 4px 4px 4px 4px #ccc;
      cursor: pointer;
    }
    .count-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      span {
        font-size: 20px;
      }
    }
    .conut-body {
      font-size: 26px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
    .conut-more {
      font-size: 13px;
      margin-bottom: 10px;
    }
  }
}
</style>
